<template>
    <div class="title-filter-page">
        <div class="title">{{ title }}</div>
        <n-popover :show="show" placement="bottom-end" @clickoutside="onCancel">
            <template #trigger>
                <div class="filter-content" @click="onFilter">
                    <i class="iconfont icon-filter"></i>
                </div>
            </template>
            <div class="table-filter-popup-content">
                <div class="title">展示的列</div>
                <div class="checkbox-content">
                    <!-- <n-checkbox-group v-model:value="value">
                        <div
                            v-for="(item, index) in options"
                            :key="index"
                            class="item"
                        >
                            <n-checkbox
                                :value="item.value"
                                :label="item.label"
                                :disabled="item.disabled"
                            />
                        </div>
                    </n-checkbox-group> -->
                    <AllCheckBox
                        v-model:value="value"
                        :options="options"
                        vertical
                    />
                </div>
                <div class="btn-content">
                    <n-button size="tiny" @click="onCancel">取消</n-button>
                    <n-button size="tiny" type="primary" @click="onConfirm">
                        确定
                    </n-button>
                </div>
            </div>
        </n-popover>
    </div>
</template>
<script setup>
import { ref, toRefs, onMounted } from "vue";
import AllCheckBox from "@/common/AllCheckBox/index.vue";
import { cloneDeep } from "lodash";

const props = defineProps({
    //标题
    title: {
        type: String,
        default: () => "操作",
    },
    //选项 value label
    options: {
        type: Array,
        default: () => [],
    },
    //默认选中项 如果没传选中所有项
    defaultVal: {
        type: Array,
        default: () => [],
    },
});

const { defaultVal } = toRefs(props);
const emits = defineEmits(["confirm"]);

const show = ref(false);
const isDisabled = ref(false);

const value = ref([]);
const oldValue = ref(null);

onMounted(() => {
    let _valueList = [];
    if (!defaultVal.value.length) {
        options.value.map((v) => _valueList.push(v.value));
    } else {
        _valueList = defaultVal.value;
    }
    value.value = _valueList;
});

//点击筛选按钮
const onFilter = () => {
    if (isDisabled.value) return;
    show.value = true;
    isDisabled.value = true;
    oldValue.value = cloneDeep(value.value) ;
};

//点击取消
const onCancel = () => {
    show.value = false;
    value.value = oldValue.value;
    setTimeout(() => {
        isDisabled.value = false;
    }, 100);
};

//点击确认
const onConfirm = () => {
    show.value = false;
    isDisabled.value = false;
    emits("confirm", cloneDeep(value.value) );
};
</script>
<style lang="less" scoped>
.title-filter-page {
    .filter-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--image-error-bg-color);
        cursor: pointer;
        i {
            font-size: 18px;
            color: var(--primary-color);
        }
    }
}
.table-filter-popup-content {
    .title {
        color: var(--text-color-base);
    }
}
</style>
